<template>
  <div class="ddi">
    <div class="ddi1">
      <div class="ddi2">
        <div class="ddi6">{{item.useType}}</div>
        <div class="ddi6">{{item.model}}</div>
        <div class="ddi6">{{item.brand}}</div>
      </div>
      <div class="ddi3" v-show="item.iconUrl !== null">
        <Upload type="select" :before-upload="checkUpload" action="" :format="['jpg','jpeg','png']">
          <!--<Button type="info" v-bind:disabled="uploading" v-text="hasPic?'更换图片':'选择图片'"></Button>-->
          <img v-show="item.iconUrl !== null" :src="preview" alt="" class="ddi4">
        </Upload>
      </div>
      <div class="ddi3" v-show="item.iconUrl === null">
        <Upload type="select" :before-upload="checkUpload" action="" :format="['jpg','jpeg','png']">
          <img v-show="item.iconUrl === null" :src="preview" alt="" class="ddi4">
        </Upload>
      </div>
    </div>
    <Row type="flex" justify="center" :gutter="8">
      <Col span="12">
        <Button size="small" long @click="useDefault">默认图标</Button>
      </Col>
      <Col span="12">
        <Button type="info" size="small" long @click="uploadIcon" :loading="uploading" v-bind:disabled="!ifChange">
          <span v-if="!uploading">上传图标</span>
          <span v-else>上传中...</span>
        </Button>
      </Col>
    </Row>
  </div>
</template>

<script>
  export default {
    name: 'IconCard',
    props: ['item'],
    created: function () {
      if (this.item.iconUrl === null) {
        this.useDefault()
      } else {
        // todo  使用已经保存的数据
        this.askPic(this.item.iconUrl)
      }
    },
    data: function () {
      return {
        file: null,
        preview: null,
        ifChange: false,
        uploading: false
      }
    },
    methods: {
      useDefault: function () {
        // 恢复默认图标 显示
        this.preview = require('../../../assets/default_device.png')
        this.file = null
        if (this.item.iconUrl === null) {
          this.ifChange = false
        } else {
          this.ifChange = true
        }
      },
      uploadIcon: function () {
        if (!this.ifChange) {
          this.$Message.warning('图片未做改变，不需要上传保存....')
          return
        }
        this.uploading = true
        if (this.file === null && this.item.iconUrl !== null) {
          // 清空用默认的图片保存
          window.myapi.do_get('/iot/devType/empty/' + this.item.id).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              this.$Notice.success({
                title: '操作提示',
                desc: '上传成功！ '
              })
            }
          }).catch(info => {
            this.$Notice.warning({
              title: '操作提示',
              desc: info
            })
          }).finally(() => {
            this.uploading = false
            this.ifChange = false
            this.file = null
          })
        } else {
          // // 装载上传的文件
          let formData = new FormData()
          formData.append('pic', this.file)
          window.myapi.upload('/iot/devType/upload/' + this.item.id, formData).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              this.$Notice.success({
                title: '操作提示',
                desc: '上传成功！ '
              })
            }
          }).catch(info => {
            this.$Notice.warning({
              title: '操作提示',
              desc: info
            })
          }).finally(() => {
            this.uploading = false
            this.ifChange = false
            this.file = null
          })
        }
      },
      checkUpload: function (file) {
        this.file = file
        this.ifChange = true
        // 显示预览图片
        this.preview = window.URL.createObjectURL(file)
        // :before-upload 返回false 终端自动上传的动作，换做手动上传”
        return false
      },
      askPic: function (picUrl) {
        window.myapi.show_pic({url: picUrl}).then(resp => {
          this.preview = 'data:image/png;base64,' + btoa(
            new Uint8Array(resp.data)
              .reduce((data, byte) => data + String.fromCharCode(byte), '')
          )
        }).catch(info => {
          this.$Notice.warning({
            title: '操作提示',
            desc: info
          })
        }).finally((fin) => {
        })
      }
    }
  }
</script>

<style scoped>
  .ddi {
    width: 210px;
    border-radius: 3px;
    padding: 2px;
    background: #f5f0f0;
    border: 1px solid #dcd8d8;
  }

  .ddi1 {
    display: flex;
  }

  .ddi2 {
    flex: 0 0 80px;
    text-align: right;
    padding-top: 5px;
    font-size: 12px;
    padding-left: 4px;
  }

  .ddi3 {
    flex: 1;
    display: flex;
    items-align: center;
    justify-content: center;
  }

  .ddi4 {
    width: 80px;
    height: 80px;
    cursor: pointer;
  }

  .ddi5 {
    text-align: right;
  }

  .ddi6 {
    border-bottom: dashed 1px #dcd8d8;
  }
</style>
